<template>
    <div class="navbar">
        <div class="left-side">
            <a-space>
                <img alt="logo" :src="logo" />
                <a-typography-title
                    :style="{
                        margin: 0,
                        fontSize: '18px',
                        color: '#024F97',
                        fontWeight: 600,
                    }"
                    :heading="5"
                >
                    安智管家
                </a-typography-title>
                <icon-menu-fold
                    v-if="!topMenu && appStore.device === 'mobile'"
                    style="font-size: 22px; cursor: pointer"
                    @click="toggleDrawerMenu"
                />
            </a-space>
        </div>
        <div class="center-side">
            <Menu v-if="topMenu" />
        </div>
        <ul class="right-side">
            <li>
                <a-tooltip :content="$t('settings.language')">
                    <a-button
                        class="nav-btn"
                        type="outline"
                        :shape="'circle'"
                        @click="setDropDownVisible"
                    >
                        <template #icon>
                            <icon-language />
                        </template>
                    </a-button>
                </a-tooltip>
                <a-dropdown trigger="click" @select="changeLocale">
                    <div ref="triggerBtn" class="trigger-btn"></div>
                    <template #content>
                        <a-doption
                            v-for="item in locales"
                            :key="item.value"
                            :value="item.value"
                        >
                            <template #icon>
                                <icon-check
                                    v-show="item.value === currentLocale"
                                />
                            </template>
                            {{ item.label }}
                        </a-doption>
                    </template>
                </a-dropdown>
            </li>
            <li>
                <a-tooltip
                    :content="
                        theme === 'light'
                            ? $t('settings.navbar.theme.toDark')
                            : $t('settings.navbar.theme.toLight')
                    "
                >
                    <a-button
                        class="nav-btn"
                        type="outline"
                        :shape="'circle'"
                        @click="handleToggleTheme"
                    >
                        <template #icon>
                            <icon-moon-fill v-if="theme === 'dark'" />
                            <icon-sun-fill v-else />
                        </template>
                    </a-button>
                </a-tooltip>
            </li>
            <li>
                <a-tooltip
                    :content="
                        isFullscreen
                            ? $t('settings.navbar.screen.toExit')
                            : $t('settings.navbar.screen.toFull')
                    "
                >
                    <a-button
                        class="nav-btn"
                        type="outline"
                        :shape="'circle'"
                        @click="toggleFullScreen"
                    >
                        <template #icon>
                            <icon-fullscreen-exit v-if="isFullscreen" />
                            <icon-fullscreen v-else />
                        </template>
                    </a-button>
                </a-tooltip>
            </li>
            <li>
                <a-dropdown trigger="click" @select="changeStation">
                    <a-tag class="cursor-pointer" color="#ffb400">
                        {{ curStation.stationName || '请选择' }}
                    </a-tag>
                    <template #content>
                        <a-doption
                            v-for="station in stationList"
                            :key="station.stationId"
                            :value="station"
                            :class="{
                                active:
                                    curStation.stationId === station.stationId,
                            }"
                            >{{ station.stationName }}</a-doption
                        >
                    </template>
                </a-dropdown>
            </li>
            <li>
                <a-dropdown trigger="click">
                    <a-avatar
                        :size="32"
                        :style="{ marginRight: '8px', cursor: 'pointer' }"
                    >
                        <img alt="avatar" :src="avatar" />
                    </a-avatar>
                    <template #content>
                        <a-doption>
                            <a-space @click="handleEditPass">
                                <icon-edit />
                                <span>{{ $t('modPass') }}</span>
                            </a-space>
                        </a-doption>
                        <a-doption>
                            <a-space @click="handleLogout">
                                <icon-export />
                                <span> {{$t('logOut')}} </span>
                            </a-space>
                        </a-doption>
                    </template>
                </a-dropdown>
            </li>
        </ul>
        <create-dialog ref="createDialogRef" @submit="search"></create-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { computed, ref, inject } from 'vue';
    import { useDark, useToggle, useFullscreen } from '@vueuse/core';
    import { useAppStore, useUserStore, useStation } from '@/store';
    import useLocale from '@/hooks/locale';
    import useUser from '@/hooks/user';
    import Menu from '@/components/menu/index.vue';
    import { LOCALE_OPTIONS } from '@/locale';
    import logo from '@/assets/logo.png';
    import avatar1 from '@/assets/avatar.png';
    import { useI18n } from 'vue-i18n';
    import CreateDialog from './create-dialog.vue';

    const appStore = useAppStore();
    const userStore = useUserStore();
    const userStation = useStation();

    const { t } = useI18n();
    const { change: changeStation } = userStation;
    const { logout } = useUser();
    const { changeLocale, currentLocale } = useLocale();
    const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
    const locales = [...LOCALE_OPTIONS];
    const stationList = computed(() => userStation.stationList);
    const curStation = computed(() => userStation.curStation);
    const avatar = computed(() => {
        return userStore.avatar ? userStore.avatar : avatar1;
    });
    const theme = computed(() => {
        return appStore.theme;
    });
    const topMenu = computed(() => appStore.topMenu && appStore.menu);
    const isDark = useDark({
        selector: 'body',
        attribute: 'arco-theme',
        valueDark: 'dark',
        valueLight: 'light',
        storageKey: 'arco-theme',
        onChanged(dark: boolean) {
            // overridden default behavior
            appStore.toggleTheme(dark);
        },
    });
    const toggleTheme = useToggle(isDark);
    const createDialogRef = ref();

    const handleToggleTheme = () => {
        toggleTheme();
    };
    const triggerBtn = ref();
    const handleLogout = () => {
        logout();
    };
    const handleEditPass = () => {
        createDialogRef.value.open();
    };
    const setDropDownVisible = () => {
        const event = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
        });
        triggerBtn.value.dispatchEvent(event);
    };
    const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
</script>

<style scoped lang="less">
    .navbar {
        display: flex;
        justify-content: space-between;
        height: 100%;
        background-color: var(--color-bg-2);
        border-bottom: 1px solid var(--color-border);
    }

    .left-side {
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    ::v-deep .arco-avatar {
        background-color: rgb(0 0 0 / 0%);
    }

    .center-side {
        flex: 1;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .right-side {
        display: flex;
        padding-right: 20px;
        list-style: none;

        :deep(.locale-select) {
            border-radius: 20px;
        }

        li {
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        a {
            color: var(--color-text-1);
            text-decoration: none;
        }

        .nav-btn {
            color: rgb(var(--gray-8));
            font-size: 16px;
            border-color: rgb(var(--gray-2));
        }

        .trigger-btn,
        .ref-btn {
            position: absolute;
            bottom: 14px;
        }

        .trigger-btn {
            margin-left: 14px;
        }
    }

    :global(.arco-dropdown-option.active) {
        color: rgb(var(--primary-6));
    }
</style>
